<template>
  <div id="index">
    <div class="head">
      <div class="adress" v-if="selRoleResidential != {}" @click="getRole(2)">
        <md-icon class="icon" name="location" />
        <p class="desc">{{residentialAddress}}</p>
        <span>({{roleTypeTitle}})</span>
      </div>
      <div class="message" @click="navMessage">
        <img src="/static/images/home/message.png" alt="通知" />
        <!-- <md-tag
          class="tag-num"
          size="large"
          shape="bubble"
          fill-color="linear-gradient(90deg, #FF5B60 0%, #F98472 100%)"
          type="fill"
        >3</md-tag>-->
      </div>
      <div
        class="nav-block"
        v-if="rid == 2 ||rid == 3 || rid == 4 || rid == 5 ||rid == 6 ||rid == 7 ||rid == 8 || rid == 12 || rid == 13 || rid == 14 || rid == 15|| rid == 16 || rid == 17 || rid == 18 || rid == 19 || rid == 21"
      >
        <div
          class="item"
          @click="navVote"
          v-if="rid == 2 ||rid == 3 || rid == 4 || rid == 5 ||rid == 6 ||rid == 7 ||rid == 8 || rid == 12 || rid == 13 || rid == 14 || rid == 15|| rid == 16 || rid == 17 || rid == 18 || rid == 19"
        >
          <span class="num" :class="voteNum >0 ? 'max': ''">{{voteNum}}</span>
          <span class="name">业主投票</span>
        </div>
        <div
          class="item"
          @click="navPayFees"
          v-if="rid == 2 ||rid == 3 || rid == 4 || rid == 5 || rid == 16 || rid == 17 || rid == 18 || rid == 19"
        >
          <span class="num">0</span>
          <span class="name">缴费</span>
        </div>
        <div
          class="item"
          @click="navEarnings"
          v-if="rid == 2 ||rid == 3 || rid == 4 || rid == 5 || rid == 16 || rid == 17 || rid == 18 || rid == 19"
        >
          <span class="num price">
            100
            <em>万元</em>
          </span>
          <span class="name">共有收益</span>
        </div>
        <!-- 现场投票 -->
        <div
          class="item"
          @click="navLocaleVote"
          v-if="rid == 21"
        >
          <img class="icon" src="/static/images/home/icon_14.png" alt="现场投票" />
          <span class="name">现场投票</span>
        </div>
      </div>
    </div>
    <div class="nav-tools" v-if="rid != 1  && rid != 18 && rid != 19">
      <h2>{{selRoleResidential.county}} {{selRoleResidential.negi}}</h2>
      <ul class="tools-wrap county-tools-wrap">
        <li class="tool-item" @click="navCountyWork">
          <img src="/static/images/home/icon_13.png" alt="社区办事" />
          <span>社区办事</span>
        </li>
        <li class="tool-item" @click="navCountyInform">
          <img src="/static/images/home/icon_12.png" alt="社区通知" />
          <span>社区通知</span>
        </li>
      </ul>
    </div>
    <div class="nav-tools" v-if="rid != 1  && rid != 18 && rid != 19 && rid != 21">
      <h2>我的工具</h2>
      <ul class="tools-wrap my-tools-wrap">
        <li class="tool-item" @click="navSuggest" v-if="rid == 2">
          <img src="/static/images/home/icon_1.png" alt="业主提议" />
          <span>业主提议</span>
          <!-- <md-tag
            class="tag-num"
            size="large"
            shape="bubble"
            fill-color="linear-gradient(90deg, #FF5B60 0%, #F98472 100%)"
            type="fill"
          >9</md-tag>-->
        </li>
        <!-- <li class="tool-item" @click="navCollect" v-if="rid != 1  && rid != 18 && rid != 19">
          <img src="/static/images/home/icon_2.png" alt="收藏夹" />
          <span>收藏夹</span>
        </li>-->
        <li class="tool-item" @click="navAdvice" v-if="rid != 1  && rid != 18 && rid != 19">
          <img src="/static/images/home/icon_3.png" alt="建议投诉" />
          <span>建议投诉</span>
        </li>
      </ul>
    </div>
    <div class="nav-tools" v-if="rid != 1  && rid != 18 && rid != 19">
      <h2>小区公告栏</h2>
      <ul class="tools-wrap my-tools-wrap">
        <li class="tool-item" @click="navPublicity">
          <img src="/static/images/home/icon_4.png" alt="业主大会" />
          <span>业主大会</span>
        </li>
        <li class="tool-item" @click="navCommittee">
          <img src="/static/images/home/icon_5.png" alt="业委会" />
          <span>业委会</span>
        </li>
        <li class="tool-item" @click="navManagement">
          <img src="/static/images/home/icon_6.png" alt="物业公司" />
          <span>物业公司</span>
        </li>
        <li class="tool-item" @click="navLawClause">
          <img src="/static/images/home/icon_7.png" alt="法律规章" />
          <span>法律规章</span>
        </li>
        <!-- <li class="tool-item" @click="navMaintain">
          <img src="/static/images/home/icon_8.png" alt="专项维修" />
          <span>专项维修</span>
        </li>
        <li class="tool-item" @click="navEveryday">
          <img src="/static/images/home/icon_9.png" alt="日常维保" />
          <span>日常维保</span>
        </li>
        <li class="tool-item" @click="navFinance">
          <img src="/static/images/home/icon_10.png" alt="财务公示" />
          <span>财务公示</span>
        </li>
        <li class="tool-item" @click="navPooled">
          <img src="/static/images/home/icon_11.png" alt="公摊公示" />
          <span>公摊公示</span>
        </li>-->
      </ul>
    </div>
    <div
      class="nav-tools"
      v-if="rid == 4 || rid == 5 ||rid == 16 || rid == 17 || rid == 18 || rid == 19  "
    >
      <h2>业委会办公</h2>
      <ul class="tools-wrap my-tools-wrap">
        <li class="tool-item">
          <img src="/static/images/home/icon_4.png" alt="我的任务" />
          <span>我的任务</span>
        </li>
        <li class="tool-item">
          <img src="/static/images/home/icon_1.png" alt="委员提议" />
          <span>委员提议</span>
        </li>
        <li class="tool-item">
          <img src="/static/images/home/icon_5.png" alt="委员表决" />
          <span>委员表决</span>
        </li>
        <li class="tool-item">
          <img src="/static/images/home/icon_10.png" alt="报销单" />
          <span>报销单</span>
        </li>
      </ul>
    </div>
    <div class="nav-tools" v-if="rid == 6">
      <h2>物业服务公司</h2>
      <ul class="tools-wrap my-tools-wrap">
        <li class="tool-item">
          <img src="/static/images/home/icon_8.png" alt="申请维护" />
          <span>申请维护</span>
        </li>
        <li class="tool-item">
          <img src="/static/images/home/icon_10.png" alt="申请收支" />
          <span>申请收支</span>
        </li>
      </ul>
    </div>
    <div class="copyright">
      <p>i业主服务</p>
      <p>厦门数字城市科技有限公司 版权所有</p>
      <p>© 闽ICP备19014664号</p>
    </div>
    <!-- 选角色 -->
    <div class="sel-role-layer" v-if="selRoleLayer">
      <div class="inner-content">
        <h3>请选择角色</h3>
        <div class="sel-items">
          <md-radio
            class="item"
            v-for="(item,index) in roleList"
            :key="index"
            :name="item.rid"
            v-model="rid"
            :label="item.title"
            size="lg"
          />
        </div>
        <div class="btn" @click="comifrmRole">确定</div>
      </div>
    </div>
    <!-- 选小区 -->
    <div class="sel-residential-layer" v-if="selResidentialLayer">
      <div class="inner-content">
        <h3>请选择小区</h3>
        <div class="sel-items">
          <md-radio
            class="item"
            v-model="qid"
            :name="item.qid"
            :label="item.community"
            size="lg"
            v-for="(item,index) in residentialList"
            :key="index"
          />
        </div>
        <div class="btn-block">
          <!-- <div class="cancel" @click="selResidentialLayer = false">取消</div> -->
          <div class="comifrm" @click="comifrmResidential">确定</div>
        </div>
      </div>
    </div>
    <tabBar :currentIndex="currentIndex"></tabBar>
  </div>
</template>

<script>
import https from "@/https";
import config from "@/config";
import tabBar from "@/components/common/tabBar";
import { Tag, Icon, Toast, Dialog, Radio } from "mand-mobile";
export default {
  components: {
    tabBar,
    [Tag.name]: Tag,
    [Icon.name]: Icon,
    [Dialog.name]: Dialog,
    [Radio.name]: Radio
  },
  name: "index",
  data() {
    return {
      voteNum: 0, //投票数量
      currentIndex: 1, //tabbar 值
      roleList: [], //角色列表
      initType: 1, //初始角色方式，1为页面初始化，2为点击地址重选选择
      selRoleLayer: false, // 选角色弹窗
      selRoleResidential: {}, //选中的小区
      residentialList: [], //拥有的小区
      selResidentialLayer: false, //选择小区弹窗
      qid: 0, // 选中的小区id
      rid: 2 //
    };
  },
  computed: {
    userInfo() {
      return this.$store.getters.getUserInfo;
    },
    roleTypeTitle() {
      let roleList = this.roleList;
      let str = "";
      roleList.forEach(item => {
        if (item.rid == this.rid) {
          str = item.title;
        }
      });
      return str;
    },
    residentialAddress() {
      let selRoleResidential = this.selRoleResidential;
      let residentialList = this.residentialList;
      let str = "";
      residentialList.forEach(item => {
        if (item.qid == this.qid) {
          str = item.community;
        }
      });
      str = str || selRoleResidential.community;
      return str;
    }
  },
  methods: {
    //私信通知
    navMessage() {
      let mobile = this.userInfo.mobile;
      let uid = this.userInfo.id;
      let router = "index";
      this.$router.push({
        path: "/messageList",
        query: {
          mobile: mobile,
          uid: uid,
          router: router
        }
      });
    },
    // 现场投票
    navLocaleVote() {
      this.$router.push({
        path: "/localeVoteIndex"
      });
    },
    // 投票
    navVote() {
      this.$router.push({
        path: "/voteList"
      });
    },
    // 缴费
    navPayFees() {
      Toast.info("该功能系统暂未启用");
      return;
      this.$router.push({
        path: "/payFees"
      });
    },
    // 共有收益
    navEarnings() {
      Toast.info("该功能系统暂未启用");
      return;
      this.$router.push({
        path: "/earnings"
      });
    },
    // 社区办事
    navCountyWork() {
      this.$router.push({
        path: "/communityGuide"
      });
    },
    // 社区通知
    navCountyInform() {
      this.$router.push({
        path: "/communityInform"
      });
    },
    // 业主提议
    navSuggest() {
      this.$router.push({
        path: "/suggestList"
      });
    },
    // 收藏夹
    navCollect() {
      this.$router.push({
        path: "/collect"
      });
    },
    // 建议投诉
    navAdvice() {
      this.$router.push({
        path: "/advice"
      });
    },
    // 业主大会
    navPublicity() {
      this.$router.push({
        path: "/publicity"
      });
    },
    // 业委会
    navCommittee() {
      this.$router.push({
        path: "/empty"
      });
      // Toast.info("该功能系统暂未启用");
      // return;
      // this.$router.push({
      //   path: "/committee"
      // });
    },
    // 物业公司
    navManagement() {
      this.$router.push({
        path: "/empty"
      });
      // Toast.info("该功能系统暂未启用");
      // return;
      // this.$router.push({
      //   path: "/advice"
      // });
    },
    // 法律规章
    navLawClause() {
      this.$router.push({
        path: "/lawClause"
      });
    },
    // 专项维修
    navMaintain() {
      this.$router.push({
        path: "/empty"
      });
      // Toast.info("该功能系统暂未启用");
      // return;
      // this.$router.push({
      //   path: "/maintain"
      // });
    },
    // 日常维保
    navEveryday() {
      this.$router.push({
        path: "/empty"
      });
      // Toast.info("该功能系统暂未启用");
      // return;
      // this.$router.push({
      //   path: "/everyday"
      // });
    },
    // 财务公示
    navFinance() {
      this.$router.push({
        path: "/empty"
      });
      // Toast.info("该功能系统暂未启用");
      // return;
      // this.$router.push({
      //   path: "/finance"
      // });
    },
    // 公摊公示
    navPooled() {
      this.$router.push({
        path: "/empty"
      });
      // Toast.info("该功能系统暂未启用");
      // return;
      // this.$router.push({
      //   path: "/pooled"
      // });
    },
    //获取地址栏的参数
    getUrlParam(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
      var r = window.location.search.substr(1).match(reg);
      if (r != null) return unescape(r[2]);
      return null;
    },
    // 获取微信登录信息
    getCode() {
      Toast.loading("加载中...");
      if (this.$store.state.userInfo.mobile != undefined) {
        this.getRole(1);
        return false;
      }
      var code = this.getUrlParam("code"); // 截取路径中的code，如果没有就去微信授权，如果已经获取到了就直接传code给后台获取openId
      var local = encodeURIComponent("https://xm.sqyzdh.com");
      var APPID = "wx8d06ea96180136be";
      if (code == null || code === "" || code == this.$store.getters.getCode) {
        window.location.href =
          "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
          APPID +
          "&redirect_uri=" +
          local +
          "&response_type=code&scope=snsapi_userinfo&state=#wechat_redirect";
      } else {
        this.getOpenId(code); //把code传给后台获取用户信息
      }
    },
    // 获取用户信息
    getOpenId(code) {
      this.$store.commit("saveCode", code);
      let params = {
        code
      };
      https
        .fetchGet(config.getLoginStatus, params)
        .then(res => {
          Toast.hide();
          if (res.data.code == 1) {
            let userInfo = res.data.data;
            // console.log('个人信息',userInfo);
            this.$store.commit("saveUserInfo", userInfo);
            this.getRole(1);
          } else if (res.data.code == 0) {
            let wxInfo = res.data.data;
            this.$store.commit("saveWxInfo", wxInfo);
            this.$router.replace({
              path: "/register"
            });
          } else {
            Toast.failed(res.data.msg);
          }
        })
        .catch(err => {
          Toast.hide();
          console.log(err);
        });
    },
    // 获取角色列表
    getRole(type) {
      Toast.hide();
      let roleType = this.$store.state.roleType; //选中角色
      let rid = roleType.rid;
      let roleList = this.$store.state.userInfo.roleList; //角色列表
      this.roleList = roleList;
      this.initType = type;
      if (type == 1) {
        if (rid == "" || rid == undefined) {
          if (roleList.length == 1) {
            this.rid = roleList[0].rid;
            this.$store.commit("saveRoleType", roleList[0]);
            this.getRoleResidential();
            this.tipVerify(roleList[0].rid);
          } else if (roleList.length > 1) {
            this.selRoleLayer = true;
            this.rid = roleList[0].rid;
          } else {
            Toast.failed("没有角色身份");
          }
        } else {
          this.rid = rid;
          this.getRoleResidential();
          this.tipVerify(rid);
        }
      } else if (type == 2) {
        this.selRoleLayer = true;
        this.rid = roleType.rid;
      }
    },
    // 确认角色
    comifrmRole() {
      let rid = this.rid;
      let roleList = this.roleList;
      roleList.forEach(item => {
        if (rid == item.rid) {
          this.$store.commit("saveRoleType", item);
        }
      });
      this.tipVerify(rid);
      this.getRoleResidential();
      this.selRoleLayer = false;
    },
    // 确认小区
    comifrmResidential() {
      let qid = this.qid;
      let residentialList = this.residentialList;
      residentialList.forEach(item => {
        if (qid == item.qid) {
          this.selRoleResidential = item;
          this.$store.commit("saveResidentialType", item);
        }
      });
      this.selResidentialLayer = false;
      this.getVoteNum();
    },
    // 获取小区列表
    getRoleResidential() {
      Toast.loading("加载中...");
      let type = this.initType;
      let residentialType = this.$store.state.residentialType; //选中小区
      let residentialList = this.$store.state.residentialList; //小区
      let qid = residentialType.qid;
      if (type == 1) {
        if (qid == "" || qid == undefined) {
          let uid = this.$store.state.userInfo.id;
          let rid = this.rid;
          if (rid == 1) {
            Toast.hide();
            this.selRoleResidential = {
              qid: 1,
              community: "产权认证中"
            };
          } else {
            let params = {
              uid,
              rid
            };
            https
              .fetchGet(config.getRoleResidential, params)
              .then(res => {
                Toast.hide();
                if (res.data.code == 1) {
                  let residentialList = res.data.data.residentialList;
                  this.residentialList = residentialList;
                  this.$store.commit("saveResidentialList", residentialList);
                  if (residentialList.length == 1) {
                    this.qid = residentialList[0].qid;
                    this.selRoleResidential = residentialList[0];
                    this.$store.commit(
                      "saveResidentialType",
                      residentialList[0]
                    );
                    this.getVoteNum();
                  } else if (residentialList.length > 1) {
                    this.qid = residentialList[0].qid;
                    this.selResidentialLayer = true;
                  } else {
                    Toast.failed("您尚未有小区信息");
                  }
                } else {
                  this.$store.commit("saveResidentialType", {});
                  this.selRoleResidential = {};
                  Toast.failed(res.data.msg);
                }
              })
              .catch(err => {
                Toast.hide();
                console.log(err);
              });
          }
        } else {
          Toast.hide();
          this.qid = qid;
          this.selRoleResidential = this.$store.state.residentialType;
          this.getVoteNum();
        }
      } else if (type == 2) {
        let uid = this.$store.state.userInfo.id;
        let rid = this.rid;
        if (rid == 1) {
          Toast.hide();
          this.selRoleResidential = {
            qid: 1,
            community: "产权认证中"
          };
        } else {
          let params = {
            uid,
            rid
          };
          https
            .fetchGet(config.getRoleResidential, params)
            .then(res => {
              Toast.hide();
              if (res.data.code == 1) {
                let residentialList = res.data.data.residentialList;
                this.residentialList = residentialList;
                this.$store.commit("saveResidentialList", residentialList);
                if (qid == "" || qid == undefined) {
                  this.selRoleResidential = residentialList[0];
                  this.qid = residentialList[0].qid;
                } else {
                  this.qid = qid;
                  this.selRoleResidential = this.$store.state.residentialType;
                }
                this.selResidentialLayer = true;
              } else {
                this.$store.commit("saveResidentialType", {});
                this.selRoleResidential = {};
                Toast.failed(res.data.msg);
              }
            })
            .catch(err => {
              Toast.hide();
              console.log(err);
            });
        }
      }
    },
    // 验证是否产权认证
    tipVerify(rid) {
      let _this = this;
      console.log(rid);
      if (rid != 3 && rid != 6 && rid != 12) {
        if (this.$store.getters.getUserInfo.is_check == 0) {
          Toast.hide();
          Dialog.confirm({
            title: "提示",
            content: "您得完成产权登记，才能进入您的小区",
            confirmText: "确定",
            onConfirm: () => {
              _this.$router.replace({
                path: "/attestation",
                query: { selTab: "p1" }
              });
            },
            onCancel: () => {
              _this.getRole(2);
            }
          });
          return;
        }
      }
    },
    // 获取投票数
    getVoteNum() {
      let params = {
        qid: this.$store.state.residentialType.qid
      };
      https
        .fetchPost(config.voteNum, params)
        .then(res => {
          console.log(res.data);
          if (res.data.code == 1) {
            this.voteNum = res.data.data;
          } else {
            Toast.failed(res.data.msg);
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  },
  created() {
    this.selRoleResidential = this.$store.state.residentialType;
    this.getCode();
  }
};
</script>

<style lang="scss" scoped>
$themeColor: #444444;
$themeGold: #d7b987;
#index {
  padding-bottom: 70px;
  .head {
    position: relative;
    display: flex;
    min-height: 120px;
    padding-top: 120px;
    margin-bottom: 30px;
    background: linear-gradient(to right, $themeColor, #333);
    .adress {
      position: absolute;
      display: flex;
      align-items: center;
      top: 32px;
      left: 20px;
      font-size: 34px;
      height: 60px;
      color: #fff;
      .icon {
        font-size: 32px;
        margin-right: 10px;
      }
      .desc {
        line-height: 60px;
        max-width: 350px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    .message {
      position: absolute;
      top: 40px;
      right: 50px;
      width: 60px;
      height: 60px;
      img {
        width: 50px;
        height: 50px;
      }
      .tag-num {
        position: absolute;
        top: -20px;
        right: -30px;
      }
    }
    .nav-block {
      display: flex;
      width: 100%;
      height: 180px;
      border-radius: 15px;
      z-index: 10;
      .item {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 33.33%;
        height: 100%;
        .num {
          color: #fff;
          font-size: 50px;
          font-weight: 600;
          margin-bottom: 30px;
          em {
            font-size: 14px;
            margin-left: 4px;
          }
          &.price {
            // color: rgb(255, 245, 101);
            color: #e6cfa5;
          }
          &.max {
            color: #e6cfa5;
          }
        }
        .icon {
          width: 64px;
          height: 64px;
          margin-bottom: 18px;
        }
        .name {
          color: #fff;
          font-size: 32px;
        }
        .countNum {
          position: absolute;
          top: -14px;
          right: 4px;
          z-index: 99;
        }
      }
    }
  }
  .nav-tools {
    // border-bottom: 20px solid rgb(250, 247, 247);
    margin-bottom: 20px;
    background: #fff;
    h2 {
      padding-left: 30px;
      height: 80px;
      display: flex;
      align-items: center;
      font-size: 30px;
      &::before {
        content: "";
        display: block;
        height: 38px;
        border-left: 6px solid $themeGold;
        margin-right: 28px;
      }
    }
    .tools-wrap {
      display: flex;
      flex-wrap: wrap;
      padding: 20px 30px;
      .tool-item {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 25%;
        height: 150px;
        outline-style: none;
        // margin: 11px;
        img {
          width: 64px;
          height: 64px;
          margin-bottom: 18px;
        }
        span {
          font-size: 28px;
          color: #333;
        }
        .tag-num {
          position: absolute;
          top: 0px;
          right: 10px;
        }
      }
    }
  }
  .copyright {
    p {
      text-align: center;
      font-size: 20px;
      color: #999;
      margin-top: 10px;
    }
  }
  // 选角色
  .sel-role-layer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 11;
    background: rgba(0, 0, 0, 0.6);
    .inner-content {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      background: #fff;
      width: 460px;
      border-radius: 12px;
      padding: 30px 30px 0;
      h3 {
        display: flex;
        justify-content: center;
        font-size: 28px;
        color: #666;
        padding-bottom: 30px;
      }
      .sel-items {
        display: flex;
        flex-direction: column;
        padding-bottom: 30px;
        max-height: 400px;
        overflow: auto;
        .item {
          padding-left: 120px;
          height: 60px;
          font-size: 36px;
          color: #444;
        }
      }
      .btn {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100px;
        border-top: 1px solid #f1f1f1;
        color: #2f86f6;
        font-size: 30px;
      }
    }
  }
  // 选小区
  .sel-residential-layer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 11;
    background: rgba(0, 0, 0, 0.6);
    .inner-content {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      background: #fff;
      width: 560px;
      border-radius: 12px;
      padding: 30px 30px 0;
      h3 {
        display: flex;
        justify-content: center;
        font-size: 28px;
        color: #666;
        padding-bottom: 30px;
      }
      .sel-items {
        display: flex;
        flex-direction: column;
        padding-bottom: 30px;
        max-height: 400px;
        overflow: auto;
        .item {
          // height: 60px;
          font-size: 36px;
          color: #444;
        }
      }
      .btn-block {
        display: flex;
        border-top: 1px solid #f1f1f1;

        div {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100%;
          height: 100px;
          color: #2f86f6;
          font-size: 30px;
          &.cancel {
            color: #999;
            position: relative;
            &::after {
              content: "";
              position: absolute;
              top: 20px;
              right: 0;
              width: 1px;
              height: 60px;
              background: #f2f2f2;
            }
          }
        }
      }
    }
  }
}
</style>
